/* eslint-disable */
<template>
<div>
  <!-- 面包屑导航区域 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>参数列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon></el-alert>

    <el-row>
      <el-col>
        <span>选择商品分类：</span>
        <!-- 选择商品的级联选择框 -->
        <el-cascader
            v-model="selectedCate"
            :options="cateList"
            :props="cateProps"
            @change="handleChange"
            clearable>
        </el-cascader>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
      </el-tab-pane>

      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</div>
</template>

<script>
export default {
  name: "params",
  data() {
    return {
      cateList: [],
      // 指定级联选择器的配置对象
      cateProps: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        checkStrictly: true
      },
// 级联选择框双向绑定到的数组
      selectedCate: [],
      activeName:'many',
      // 动态参数的数据
      manyTableData: [],
// 静态属性的数据
      onlyTableData: [],


    }
  },
  created() {
    this.getCateList()
  },
  computed:{
    isBtnDisabled(){
      if(this.selectedCate.length !==3){
        return true
      }
      return false
    },
    cateId(){
      if(this.selectedCate.length===3){
        return this.selectedCate[2]
      }
      return null
    }
  },
  methods: {
    // 获取所有的商品分类列表
    async getCateList(){
      const { data: result } = await this.$http.get('categories')
      if (result.meta.status !== 200) {
        return this.$message.error('获取商品分类列表失败！')
      }
      this.cateList = result.data
    },
    // 级联选择框选中项变化会触发这个函数
    handleChange() {
      this.getParamsData()
    },
// Tab页签点击事件的处理函数
    handleTabClick() {
      console.log(this.activeName)
      this.getParamsData()
    },
// 获取参数的列表数据
    async getParamsData() {
      // console.log(this.selectedCateKeys)
      // 选中的不是三级分类，就重置数组
      if (this.selectedCate.length !== 3) {
        this.selectedCate = []
        this.manyTableData = []
        this.onlyTableData = []

      }
      // 选中的是三级分类

      // 根据所选分类的id和当前所处的面板，获取对应的参数
      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
        params: { sel: this.activeName }
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取参数列表失败')
      }
      if(this.activeName==='many'){
        this.manyTableData = res.data
      }else
        this.onlyTableData = res.data
      return this.$message.success('获取参数列成功')
    },



    handleCate(){

    }
  }
}
</script>

<style scoped>

</style>